<!DOCTYPE html>
<html lang="zh-CN">


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="viggo" />
  <title>MrLiu的博客 - </title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="stylesheet" href="/css/github.min.css">
  <script src="/js/highlight.min.js"></script>
  
<link rel="stylesheet" href="//fonts.loli.net/css?family=Arimo:400,700,400italic.css">
<link rel="stylesheet" href="/css/fonts/linecons/css/linecons.min.css">
<link rel="stylesheet" href="/css/fonts/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/xenon-core.min.css">
<link rel="stylesheet" href="/css/xenon-components.min.css">
<link rel="stylesheet" href="/css/xenon-skins.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/nav.min.css">
<link rel="stylesheet" href="/css/md.css">

  
<script src="/js/jquery-1.11.1.min.js"></script>

  
<script src="/js/header.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
        
<script src="/js/html5shiv.min.js"></script>

        
<script src="/js/respond.min.js"></script>

    <![endif]-->
  <script>
  hljs.configure({useBR: true});
  hljs.initHighlightingOnLoad();
  </script>
  <!-- / FB Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://liu-meizhou.github.io/js%E5%8E%9F%E5%9E%8B%E9%93%BE/index.html">
  <meta property="og:title" content="MrLiu的博客 - ">
  <meta property="og:description" content="">
  <meta property="og:site_name" content="MrLiu的博客 - ">
  
  <meta property="og:image" content="/images/webstack_banner_cn.png">
  
  <!-- / Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="MrLiu的博客 - ">
  <meta name="twitter:description" content="">
  
  <meta name="twitter:image" content="/images/webstack_banner_cn.png">
  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
  <div class="sidebar-menu-inner">
    <header class="logo-env">
      <div class="logo">
        <a href="/index.html" class="logo-expanded">
          <img src="/images/logo@2x.png" width="100%" alt="" />
        </a>
        <a href="/index.html" class="logo-collapsed">
          <img src="/images/logo-collapsed@2x.png" width="40" alt="" />
        </a>
      </div>
      <div class="mobile-menu-toggle visible-xs">
        <a href="#" data-toggle="user-info-menu">
          <i class="linecons-cog"></i>
        </a>
        <a href="#" data-toggle="mobile-menu">
          <i class="fas fa-bars"></i>
        </a>
      </div>
    </header>
    <ul id="main-menu" class="main-menu">
      

      
        <li><a href="#计算机网络" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="计算机网络"><i class="far fa-star"></i><span class="title">计算机网络</span></a><ul><li><a href="#安全1" class="smooth" style="padding-left: 1em" title="安全1"><i class="far fa-star"></i><span class="title">安全1</span></a></li></ul></li><li><a href="#操作系统" class="smooth" style="padding-left: 0em" title="操作系统"><i class="far fa-star"></i><span class="title">操作系统</span></a></li><li><a href="#算法" class="smooth" style="padding-left: 0em" title="算法"><i class="far fa-star"></i><span class="title">算法</span></a></li><li><a href="#前端" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="前端"><i class="far fa-star"></i><span class="title">前端</span></a><ul><li><a href="#开发标准" class="smooth" style="padding-left: 1em" title="开发标准"><i class="far fa-star"></i><span class="title">开发标准</span></a></li><li><a href="#万维网" class="smooth" style="padding-left: 1em" title="万维网"><i class="far fa-star"></i><span class="title">万维网</span></a></li><li><a href="#浏览器" class="smooth" style="padding-left: 1em" title="浏览器"><i class="far fa-star"></i><span class="title">浏览器</span></a></li><li><a href="#HTML" class="smooth" style="padding-left: 1em" title="HTML"><i class="far fa-star"></i><span class="title">HTML</span></a></li><li><a href="#CSS" class="smooth" style="padding-left: 1em" title="CSS"><i class="far fa-star"></i><span class="title">CSS</span></a></li><li><a href="#JS" class="smooth" style="padding-left: 1em" title="JS"><i class="far fa-star"></i><span class="title">JS</span></a></li><li><a href="#Vue" class="smooth" style="padding-left: 1em" title="Vue"><i class="far fa-star"></i><span class="title">Vue</span></a></li><li><a href="#HTTP" class="smooth" style="padding-left: 1em" title="HTTP"><i class="far fa-star"></i><span class="title">HTTP</span></a></li><li><a href="#缓存" class="smooth" style="padding-left: 1em" title="缓存"><i class="far fa-star"></i><span class="title">缓存</span></a></li><li><a href="#安全" class="smooth" style="padding-left: 1em" title="安全"><i class="far fa-star"></i><span class="title">安全</span></a></li><li><a href="#实战" class="smooth" style="padding-left: 1em" title="实战"><i class="far fa-star"></i><span class="title">实战</span></a></li></ul></li><li><a href="#后端" class="smooth" style="padding-left: 0em" title="后端"><i class="far fa-star"></i><span class="title">后端</span></a></li><li><a href="#数据库" class="smooth" style="padding-left: 0em" title="数据库"><i class="far fa-star"></i><span class="title">数据库</span></a></li><li><a href="#缓存" class="smooth" style="padding-left: 0em" title="缓存"><i class="far fa-star"></i><span class="title">缓存</span></a></li><li><a href="#安全" class="smooth" style="padding-left: 0em" title="安全"><i class="far fa-star"></i><span class="title">安全</span></a></li><li><a href="#面试" class="smooth" style="padding-left: 0em" title="面试"><i class="far fa-star"></i><span class="title">面试</span></a></li><li><a href="#Git" class="smooth" style="padding-left: 0em" title="Git"><i class="fas fa-tools"></i><span class="title">Git</span></a></li><li><a href="#WebPack" class="smooth" style="padding-left: 0em" title="WebPack"><i class="fas fa-tools"></i><span class="title">WebPack</span></a></li><li><a href="#Nginx" class="smooth" style="padding-left: 0em" title="Nginx"><i class="fas fa-tools"></i><span class="title">Nginx</span></a></li><li><a href="#其他" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="其他"><i class="fas fa-tools"></i><span class="title">其他</span></a><ul><li><a href="#开发工具" class="smooth" style="padding-left: 1em" title="开发工具"><i class="fas fa-tools"></i><span class="title">开发工具</span></a></li><li><a href="#我的博客" class="smooth" style="padding-left: 1em" title="我的博客"><i class="fas fa-blog"></i><span class="title">我的博客</span></a></li></ul></li>
      

      
      <li class="submit-tag">
        <a href="/author">
          <i class="far fa-heart"></i>
          <span class="tooltip-blue">关于作者</span>
        </a>
      </li>
      
      
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-eye"></i>
          <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-users"></i>
          <span id="busuanzi_container_site_uv">本站总访客数<span id="busuanzi_value_site_uv"></span></span>
        </a>
      </li>
      
    </ul>
  </div>
  <div class="e-resize"></div>
</div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="hidden-sm hidden-xs hover-line">
            <a href="#" data-toggle="sidebar">
              <i class="fas fa-bars"></i>
            </a>
          </li>
          <li class="dropdown hover-line language-switcher">
            <a href="/index.html" class="dropdown-toggle" data-toggle="dropdown">
              <img src="/images/flags/flag-cn.png" alt="flag-cn" /> Chinese
            </a>
            <ul class="dropdown-menu languages">
              <li class="active">
                <a href="/index.html">
                  <img src="/images/flags/flag-cn.png" alt="flag-cn" alt="flag-cn" /> Chinese
                </a>
              </li>
            </ul>
          </li>
          <li class="switch-mode hover-line" onclick="switchNightMode()">
            <a href="#">
              <svg t="1593061068148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1681" width="16" height="16">
                <path d="M582.4 326.4c-140.8 0-256 115.2-256 256s115.2 256 256 256 256-115.2 256-256-115.2-256-256-256z m0 448c-70.4 0-131.2-36.8-164.8-92.8 12.8 3.2 27.2 4.8 40 4.8 121.6 0 219.2-99.2 219.2-219.2 0-17.6-1.6-35.2-6.4-52.8 60.8 32 102.4 96 102.4 169.6 1.6 104-84.8 190.4-190.4 190.4zM582.4 262.4c17.6 0 32-14.4 32-32v-128c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM262.4 582.4c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32zM310.4 356.8c6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8l-91.2-91.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.2 91.2zM944 220.8c-12.8-12.8-32-12.8-44.8 0l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-33.6 0-44.8zM310.4 808l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-32 0-44.8-11.2-11.2-32-11.2-44.8 0z" p-id="1682" fill="#707070"></path>
              </svg>
            </a>
          </li>
        </ul>
        
        <a target="_blank" rel="noopener" href="https://github.com/liu-meizhou/liu-meizhou.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
        
      </nav>
      

<section class="sousuo">
  <div class="search">
    <div class="search-box">
      <span class="search-icon" style="background: url(/images/search_icon.png) 0px 0px; opacity: 1;"></span>
      <input type="text" id="txt" class="search-input" autocomplete="off" placeholder="请输入关键字，按回车 / Enter 搜索">
      <button class="search-btn" id="search-btn"><i class="fa fa-search"></i></button>
    </div>
    <!-- 搜索热词 -->
    <div class="box search-hot-text" id="box" style="display: none;">
      <ul></ul>
    </div>
    <!-- 搜索引擎 -->
    <div class="search-engine" style="display: none;">
      <div class="search-engine-head">
        <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
        <div class="search-engine-tool">搜索热词： <span id="hot-btn"></span></div>
      </div>
      <ul class="search-engine-list search-engine-list_zmki_ul">
      </ul>
    </div>
  </div>
</section>
<script>search()</script>




<h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="计算机网络"></i>计算机网络</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="安全1"></i>安全1</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="操作系统"></i>操作系统</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="算法"></i>算法</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="前端"></i>前端</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="开发标准"></i>开发标准</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/前端技术开发标准', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/前端技术开发标准">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>仿亚马逊平台开发标准</strong>
          </a>
          <p class="overflowClip_2">仿亚马逊平台网站前端技术开发标准</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="万维网"></i>万维网</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/万维网是怎么工作的', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/万维网是怎么工作的">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>万维网工作</strong>
          </a>
          <p class="overflowClip_2">万维网是工作原理</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/渐进式加载', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/渐进式加载">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>渐进式加载</strong>
          </a>
          <p class="overflowClip_2">渐进式加载web内容</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/网络性能', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/网络性能">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>网络性能</strong>
          </a>
          <p class="overflowClip_2">网络性能</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="浏览器"></i>浏览器</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/事件', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/事件">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>事件</strong>
          </a>
          <p class="overflowClip_2">浏览器内置事件</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/浏览器性能', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/浏览器性能">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>浏览器性能</strong>
          </a>
          <p class="overflowClip_2">浏览器性能</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="HTML"></i>HTML</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/web组件', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/web组件">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>组件</strong>
          </a>
          <p class="overflowClip_2">html组件制作</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="CSS"></i>CSS</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/css', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/css">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>css</strong>
          </a>
          <p class="overflowClip_2">css原理、开发通用注意介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/css属性', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/css属性">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>css属性</strong>
          </a>
          <p class="overflowClip_2">css属性介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/css模型', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/css模型">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>css模型</strong>
          </a>
          <p class="overflowClip_2">css模型介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/css实战', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/css实战">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>css实战</strong>
          </a>
          <p class="overflowClip_2">css项目实战</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="JS"></i>JS</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/js', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/js">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>js</strong>
          </a>
          <p class="overflowClip_2">js介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/js高级', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/js高级">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>js高级</strong>
          </a>
          <p class="overflowClip_2">js高级介绍</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="Vue"></i>Vue</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/vue', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/vue">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>vue</strong>
          </a>
          <p class="overflowClip_2">vue介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/vue路由', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/vue路由">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>vue路由</strong>
          </a>
          <p class="overflowClip_2">vue路由介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/vue组件', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/vue组件">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>vue组件</strong>
          </a>
          <p class="overflowClip_2">vue组件介绍</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="HTTP"></i>HTTP</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="缓存"></i>缓存</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="安全"></i>安全</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/https', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/https">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>https</strong>
          </a>
          <p class="overflowClip_2">https防止中间人嗅探</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="实战"></i>实战</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="后端"></i>后端</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="数据库"></i>数据库</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="缓存"></i>缓存</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="安全"></i>安全</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="面试"></i>面试</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="Git"></i>Git</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/git', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/git">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>git</strong>
          </a>
          <p class="overflowClip_2">git原理介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/git命令', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/git命令">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>git命令</strong>
          </a>
          <p class="overflowClip_2">git命令版本树介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/git实战', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/git实战">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>git实战</strong>
          </a>
          <p class="overflowClip_2">项目中遇到git问题实战</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="WebPack"></i>WebPack</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/webpack', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/webpack">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/webpack/webpack.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>webpack</strong>
          </a>
          <p class="overflowClip_2">webpack原理介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/webpack配置', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/webpack配置">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/webpack/webpack.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>webpack配置</strong>
          </a>
          <p class="overflowClip_2">webpack配置文件介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/webpack命令', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/webpack命令">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/webpack/webpack.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>webpack命令</strong>
          </a>
          <p class="overflowClip_2">webpack命令介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/webpack实战', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/webpack实战">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/webpack/webpack.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>webpack实战</strong>
          </a>
          <p class="overflowClip_2">项目中遇到webpack问题</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="Nginx"></i>Nginx</h4>
<div class="row">
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/nginx', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/nginx">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>nginx</strong>
          </a>
          <p class="overflowClip_2">nginx原理介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/nginx命令', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/nginx命令">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>nginx命令</strong>
          </a>
          <p class="overflowClip_2">nginx命令介绍</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-sm-3">
    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('/nginx实战', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="/nginx实战">
      <div class="xe-comment-entry">
        <a class="xe-user-img">
          <img data-src="/images/logos/myblog.png" class="lozad img-circle" width="40">
        </a>
        <div class="xe-comment">
          <a href="#" class="xe-user-name overflowClip_1">
            <strong>nginx实战</strong>
          </a>
          <p class="overflowClip_2">项目中遇到nginx问题</p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="其他"></i>其他</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="开发工具"></i>开发工具</h4>
<div class="row">
  
</div>
<br /><h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="我的博客"></i>我的博客</h4>
<div class="row">
  
</div>
<br />

    </div>
  </div>
  <div class="go-up">
  <a href="#" rel="go-top">
    <i class="fas fa-angle-up"></i>
  </a>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
<script src="/js/resizeable.min.js"></script>
<script src="/js/joinable.js"></script>
<script src="/js/xenon-api.min.js"></script>
<script src="/js/xenon-toggles.min.js"></script>
<script src="/js/xenon-custom.min.js"></script>


<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script src="/js/lozad.min.js"></script>


</body>

<script src="/js/footer.js"></script>

</html>
